import { config } from 'utils'
import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import queryString from 'query-string'
import { Page, List } from 'components'
import { ListMenuType } from 'utils/enums'
import { transactionStatus } from '../../utils/seletLocalData'
import Filter from './Filter'
import SearchModal from './Modal.js'

const TransactionReceipt = ({ location, dispatch, transactionReceipt, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, selectedRowKeys, searchModalVisable, customerInfo, customerRes, isfind } = transactionReceipt
  const { pageSize } = pagination
  const listProps = {
    dataSource: list,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['transactionReceipt/query'],
    columnsData: [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: 'UpdateTime',
        dataIndex: 'updateTime',
        key: 'updateTime',
      },
      {
        title: 'CUSTOMER_NAME',
        key: 'CUSTOMER_NAME',
        render: (text, record) => {
          return (
            <span>
              {`${record.firstName}${record.middleName}${record.lastName}`}
            </span>
          )
        },
      },
      {
        title: 'TradersId',
        dataIndex: 'tradersId',
        key: 'tradersId',
      },
      {
        title: 'TradersName',
        dataIndex: 'tradersName',
        key: 'tradersName',
      },
      {
        title: 'FromCurrencyCode',
        dataIndex: 'fromCurrencyCode',
        key: 'fromCurrencyCode',
      },
      {
        title: 'ToCurrencyCode',
        dataIndex: 'toCurrencyCode',
        key: 'toCurrencyCode',
      },
      {
        title: 'FromAmount',
        dataIndex: 'fromAmount',
        key: 'fromAmount',
      },
      {
        title: 'ToAmount',
        dataIndex: 'toAmount',
        key: 'toAmount',
      },
      {
        title: 'STATUS',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          let statusText
          transactionStatus.map((currentValue) => {
            if (currentValue.key === record.status) {
              statusText = currentValue.value
            }
          })
          return (
            <span>{statusText}</span>
          )
        },
      },
    ],
    pagination,
    location,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'transactionReceipt/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch(routerRedux.push({
        pathname: `/transactionreceipt/detail/${item.id}/edit`,
      }))
    },
    onArriveItem (item) {
      dispatch(routerRedux.push({
        pathname: `/transactionreceipt/detail/${item}/arrive`,
      }))
    },
    onPayItem (item) {
      dispatch(routerRedux.push({
        pathname: `/transactionreceipt/detail/${item}/pay`,
      }))
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'transactionReceipt/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }
  const filterProps = {
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          page: 1,
          pageSize,
        },
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/transactionReceipt',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/transactionReceipt',
      }))
    },
    onAdd () {
      dispatch({
        type: 'transactionReceipt/showSearchModal',
      })
    },
  }

  const handleDeleteItems = () => {
    dispatch({
      type: 'transactionReceipt/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
  }

  const SearchModalProps = {
    isfind,
    customerRes,
    customerInfo,
    visible: searchModalVisable,
    handleOK: (values) => {
      dispatch({
        type: 'transactionReceipt/getCustomer',
        payload: values,
      })
    },
    handleCancle: () => {
      dispatch({
        type: 'transactionReceipt/closeSearchModal',
      })
    },
    goDetail: (record) => {
      dispatch(routerRedux.push({
        pathname: `/transactionreceipt/detail/new/${record.customerNumber}`,
      }))
    },
    handleAdd: () => {
      dispatch(routerRedux.push({
        pathname: '/customer/detail/new',
      }))
    },
  }
  return (
    <Page inner>
      <Filter {...filterProps} />
      {
        selectedRowKeys.length > 0 &&
        <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
          <Col>
            {`Selected ${selectedRowKeys.length} items `}
            <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
              <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
            </Popconfirm>
          </Col>
        </Row>
      }
      <List {...listProps} />
      <SearchModal {...SearchModalProps}/>
    </Page>
  )
}

TransactionReceipt.propTypes = {
  transactionReceipt: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ transactionReceipt, loading }) => ({ transactionReceipt, loading }))(TransactionReceipt)
